<script setup lang="ts">
    import { ref } from "vue";
    import { CommetList, Comment } from "@/types/article";
    import {
        reqGetComments,
        reqSetComment,
        reqDelGood,
        reqSetGood,
    } from "@/api/article";
    import { Toast } from "vant";
    import ReplyComment from "./replyComment.vue";
    const list = ref<CommetList>([]);
    const loading = ref(false);
    const finished = ref(false);
    const offset = ref("");
    const commentInfo = ref("");
    const isShowReply = ref(false);
    const currentComment = ref();
    const props = defineProps({
        articleId: String,
    });
    // 加载评论数据
    const onLoad = async () => {
        const { data } = await reqGetComments(
            "a",
            props.articleId as string,
            offset.value
        );
        offset.value = data.data.last_id;
        const arr = data.data.results;
        list.value = [...list.value, ...arr];
        loading.value = false;
        if (arr.length === 0) {
            finished.value = true;
        }
    };
    onLoad();
    // 查看回复
    const clickShowReply = (comment: Comment) => {
        currentComment.value = comment;
        isShowReply.value = true;
    };
    // 切换关注
    const toggleCommentLike = async (comment: Comment) => {
        try {
            if (comment.is_liking) {
                // 是点赞状态,那就取消点赞
                await reqDelGood(comment.com_id);
                Toast.success("取消点赞");
            } else {
                // 是取消点赞的状态，那就是点赞
                await reqSetGood(comment.com_id);
                Toast.success("点赞成功");
            }
            // 数据反显
            comment.is_liking = !comment.is_liking;
        } catch (error) {
            Toast.fail("操作失败");
        }
    };
    // 发表评论
    const issue = async () => {
        // 未评论
        if (commentInfo.value === "") return;
        const { data } = await reqSetComment(
            props.articleId as string,
            commentInfo.value
        );
        list.value.unshift(data.data.new_obj);
        Toast.success("评论成功");
        commentInfo.value = "";
    };
</script>
<template>
    <div class="article-comments">
        <!-- 评论列表 -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <van-cell
                v-if="list.length > 1"
                v-for="(item, index) in list"
                :key="index">
                <van-image
                    slot="icon"
                    round
                    width="30"
                    height="30"
                    style="margin-right: 10px"
                    :src="item.aut_photo" />
                <span style="color: #466b9d" slot="title">{{
                    item.aut_name
                }}</span>
                <div slot="label">
                    <p style="color: #363636">{{ item.content }}</p>
                    <p style="display: flex; justify-content: space-between">
                        <span style="margin-right: 10px">{{
                            item.pubdate
                        }}</span>
                        <van-button
                            @click="clickShowReply(item)"
                            size="mini"
                            type="default"
                            >回复</van-button
                        >
                        <van-icon
                            @click="toggleCommentLike(item)"
                            slot="right-icon"
                            :name="item.is_liking ? 'like' : 'like-o'" />
                    </p>
                </div>
            </van-cell>
        </van-list>
        <!-- 评论列表 -->

        <!-- 发布评论 -->
        <van-cell-group class="publish-wrap">
            <van-field
                clearable
                v-model.trim="commentInfo"
                placeholder="请输入评论内容"
                @keyup.enter="issue">
                <template #button>
                    <van-button @click="issue" size="mini" type="primary"
                        >发布</van-button
                    >
                </template>
            </van-field>
        </van-cell-group>
        <!-- /发布评论 -->
        <van-popup
            v-model:show="isShowReply"
            round
            position="bottom"
            :style="{ height: '85%' }">
            <ReplyComment
                v-if="isShowReply"
                :articleId="articleId"
                :currentComment="currentComment"
                @closeReply="isShowReply = false"></ReplyComment>
        </van-popup>
    </div>
</template>

<style scoped lang="scss">
    // 发表评论的区域是固定在下端的
    .publish-wrap {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    // 给发表评论区空出地方
    .van-list {
        margin-bottom: 45px;
    }
</style>
